<template>
  <div class="home">
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span>重要信息通知</span>
      </div>
      <div class="card-content">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-card class="card-item" shadow="hover">
              <div class="part-top">待处理推广员申请</div>
              <div class="part-center">{{dReplyCount}}</div>
              <div class="part-bottom">
                <el-button type="text" @click="goMarketReply">去处理</el-button>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="card-item" shadow="hover">
              <div class="part-top">代付款订单数</div>
              <div class="part-center">{{invalidCount}}</div>
              <div class="part-bottom">
                <el-button type="text" @click="goOrder">去处理</el-button>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="card-item" shadow="hover">
              <div class="part-top">待邮寄的订单数</div>
              <div class="part-center">{{postCount}}</div>
              <div class="part-bottom">
                <el-button type="text" @click="goOrder">去处理</el-button>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="card-item" shadow="hover">
              <div class="part-top">待处理退款申请</div>
              <div class="part-center">{{refundCount}}</div>
              <div class="part-bottom">
                <el-button type="text" @click="goOrder">去处理</el-button>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span>运营管理者操作记录</span>
      </div>
      <div class="card-content">
        <el-table border :data="tableData" stripe style="width: 100%">
          <el-table-column prop="id" align="center" label="操作员ID号"></el-table-column>
          <el-table-column prop="first" align="center" label="主功能管理"></el-table-column>
          <el-table-column prop="do" align="center" label="操作"></el-table-column>
          <el-table-column prop="time" align="center" label="操作时间"></el-table-column>
          <el-table-column prop="info" align="center" label="具体信息">
            <template>
              <el-button size="mini" type="text">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { wxLogin,getCountOfRefund, getCountOfInvalid,getCountOfPost,getCountOfDReply } from '@/api'

export default {
  name: 'home',
  data() {
    return {
      refundCount:0,
      postCount:0,
      invalidCount:0,
      dReplyCount:0,
      tableData: [{
        id: 111,
        first: '商品管理',
        do: '修改团购',
        time: '2019/03/24 12:23:43',
        info: '商品管理'
      }]
    }
  },
  created() {
    this.getData()
    window.vue = this
  },
  methods: {
    getData() {
      wxLogin().then(res => {
        console.log(res)
      });
      getCountOfRefund().then(res => {
        this.refundCount = res
      })
      getCountOfInvalid().then(res => {
        this.invalidCount = res
      })
      getCountOfPost().then(res => {
        this.postCount = res
      })
      getCountOfDReply().then(res => {
        this.dReplyCount = res
      })
    },
    goOrder(){
  		this.$router.push('/order')
    },
    goMarketReply(){
  		this.$router.push('/market-reply')
  	}
  }
}
</script>

<style scope lang="stylus" rel="stylesheet/stylus">
.home
  padding-top 10px
.box-card
  margin-bottom 20px
.card-item
  text-align center
  padding-top 10px
  .part-center
    font-size 40px
    line-height 80px
    margin-top 10px
    font-weight bold
    color #ff9900
</style>